/* eslint-disable promise/no-callback-in-promise */

import './setup'
import {
  bootstrap,
  check,
  drawDataUrl,
  // renderAndCheck,
  getSvgDocument,
  compareToRefImage,
  assertTextRendered,
} from './helper'
import { toPng, toSvg } from '../../src'

describe('work with options', () => {
  it('should apply width and height options to node copy being rendered', (done) => {
    bootstrap(
      'dimensions/node.html',
      'dimensions/style.css',
      'dimensions/image',
    )
      .then((node) =>
        toPng(node, {
          width: 200,
          height: 200,
        }),
      )
      .then((dataUrl) => drawDataUrl(dataUrl, { width: 200, height: 200 }))
      .then(compareToRefImage)
      .then(done)
      .catch(done)
  })

  it('should render backgroundColor', (done) => {
    bootstrap('bgcolor/node.html', 'bgcolor/style.css', 'bgcolor/image')
      .then((node) => {
        return toPng(node, {
          backgroundColor: '#ff0000',
        })
      })
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should render backgroundColor in SVG', (done) => {
    bootstrap('bgcolor/node.html', 'bgcolor/style.css', 'bgcolor/image')
      .then((node) => {
        return toSvg(node, {
          backgroundColor: '#ff0000',
        })
      })
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should apply style text to node copy being rendered', (done) => {
    bootstrap('style/node.html', 'style/style.css', 'style/image')
      .then((node) => {
        return toPng(node, {
          style: { backgroundColor: 'red', transform: 'scale(0.5)' },
        })
      })
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should only clone specified style properties when includeStyleProperties is provided', (done) => {
    bootstrap('style/node.html', 'style/style.css', 'style/image-include-style')
      .then((node) => {
        return toPng(node, {
          includeStyleProperties: ['width', 'height'],
        })
      })
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should combine dimensions and style', (done) => {
    bootstrap('scale/node.html', 'scale/style.css', 'scale/image')
      .then((node) => {
        return toPng(node, {
          width: 200,
          height: 200,
          style: {
            transform: 'scale(2)',
            transformOrigin: 'top left',
          },
        })
      })
      .then((dataUrl) => drawDataUrl(dataUrl, { width: 200, height: 200 }))
      .then(compareToRefImage)
      .then(done)
      .catch(done)
  })

  it('should use node filter', (done) => {
    bootstrap('filter/node.html', 'filter/style.css', 'filter/image')
      .then((node) =>
        toPng(node, {
          filter(node) {
            if (node.classList) {
              return !node.classList.contains('omit')
            }
            return true
          },
        }),
      )
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should not apply node filter to root node', (done) => {
    bootstrap('filter/node.html', 'filter/style.css', 'filter/image')
      .then((node) =>
        toPng(node, {
          filter(node) {
            if (node.classList) {
              return node.classList.contains('include')
            }
            return false
          },
        }),
      )
      .then(check)
      .then(done)
      .catch(done)
  })

  it('should only use fontEmbedCss if it is supplied', (done) => {
    const testCss = `
        @font-face {
          name: "Arial";
          src: url("data:AAA") format("woff2");
        }
      `
    bootstrap('fonts/web-fonts/empty.html', 'fonts/web-fonts/remote.css')
      .then((node) => toSvg(node, { fontEmbedCSS: testCss }))
      .then(getSvgDocument)
      .then((doc) => {
        const styles = Array.from(doc.getElementsByTagName('style'))
        expect(styles).toHaveSize(1)
        expect(styles[0].textContent).toEqual(testCss)
      })
      .then(done)
      .catch(done)
  })

  it('should embed only the preferred font', (done) => {
    bootstrap('fonts/web-fonts/empty.html', 'fonts/web-fonts/remote.css')
      .then((node) => toSvg(node, { preferredFontFormat: 'woff2' }))
      .then(getSvgDocument)
      .then((doc) => {
        const [style] = Array.from(doc.getElementsByTagName('style'))
        expect(style.textContent).toMatch(/url\([^)]+\) format\("woff2"\)/)
        expect(style.textContent).not.toMatch(/url\([^)]+\) format\("woff"\)/)
      })
      .then(done)
      .catch(done)
  })

  // it('should use the placeholder image when fetching an image fails', (done) => {
  //   bootstrap(
  //     'placeholder/node.html',
  //     'placeholder/style.css',
  //     'placeholder/image',
  //   )
  //     .then((node) => {
  //       renderAndCheck(node, {
  //         imagePlaceholder:
  //           '',
  //       })
  //     })
  //     .then(done)
  //     .catch(done)
  // })

  it('should support cache busting', (done) => {
    bootstrap('images/node.html', 'images/style.css')
      .then(assertTextRendered(['PNG', 'JPG'], { cacheBust: true }))
      .then(done)
      .catch(done)
  })
})
